<%--
  Created by IntelliJ IDEA.
  User: 周轩霆
  Date: 2022/7/30
  Time: 11:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>滑动的登录注册页面_dowebok</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css">
    <link rel="stylesheet" href="<%=request.getContextPath()%>/static/css/style.css">
    <link rel="stylesheet" href="static/bootstrap-3.4.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="static/css/canvas.css">

    <!-- 依赖JQuery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>

    </style>
</head>

<body>
<canvas></canvas>
<div class="dowebok" id="dowebok">
    <div class="form-container sign-up-container">
        <form id="registerForm">
            <h1>注册</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="fab fa-qq"></i></a>
                <a href="#" class="social"><i class="fab fa-weixin"></i></a>
                <a href="#" class="social"><i class="fab fa-weibo"></i></a>
            </div>
            <span>或使用邮箱注册</span>
            <input type="text" placeholder="用户名" name="username" id="usernameRegister">
            <input type="email" placeholder="电子邮箱" name="email" id="emailRegister">
            <input type="password" placeholder="密码" name="password" id="passwordRegister">
            <button type="button" onclick="register()" value="注册" class="">注册</button>
            <%--            <button >注册</button>--%>
        </form>
    </div>
    <div class="form-container sign-in-container ">
        <form id="formId" method="post">
            <h1>登录</h1>
            <div class="social-container">
                <a href="#" class="social"><i class="fab fa-qq"></i></a>
                <a href="#" class="social"><i class="fab fa-weixin"></i></a>
                <a href="#" class="social"><i class="fab fa-weibo"></i></a>
            </div>
            <span>或使用您的帐号</span>
            <input type="username" placeholder="用户名" name="username" id="username"
                   value="${sessionScope.registerUser==null?null:sessionScope.registerUser}">
            <input type="password" placeholder="密码" name="password" id="password">
            <input type="text" name="code" placeholder="验证码">
            <span><img src="${pageContext.request.contextPath}/getValidateCode" id="refreshImage"
                       onclick="refresh()"></span>
            <button type="button" onclick="submitForm()" value="登录" class="">登录</button>

        </form>
    </div>
    <div class="overlay-container">
        <div class="overlay">
            <div class="overlay-panel overlay-left">
                <h1>已有帐号？</h1>
                <p>请使用您的帐号进行登录</p>
                <button class="ghost" id="signIn">登录</button>
            </div>
            <div class="overlay-panel overlay-right">
                <h1>没有帐号？</h1>
                <p>立即注册加入我们，和我们一起开始旅程吧</p>
                <button class="ghost" id="signUp">注册</button>
            </div>
        </div>
    </div>
</div>

<script src="<%=request.getContextPath()%>/static/js/index.js"></script>
<script type="text/javascript" src="static/script/jquery-1.7.2.js"></script>
<script type="text/javascript" src="static/js/jparticle.jquery.js"></script>
<script type="text/javascript" src="static/layui/layui.all.js"></script>
<script type="text/javascript" src="static/js/login.js"></script>
<script type="text/javascript" src="static/js/mylayer.js"></script>
<script type="text/javascript" src="static/layer/layer.js"></script>
<script type="text/javascript" src="static/js/jparticle.jquery.js"></script>
<script src="static/js/canvas.js"></script>
<script>
    // var name = document.getElementById("username");
    // var pass = document.getElementById("password");


    function checkUP() {
        var name = $('#username').val();
        var pass = $('#password').val();
        if (name == " " || name == "") {
            mylayer.errorMsg("用户名不能为空!");
            //如果验证不通过通过此方法跳转到指定页面.
        } else if (name == null) {
            mylayer.errorMsg("用户名不能为空!");
        } else if (pass == " " || pass == "") {
            mylayer.errorMsg("密码不能为空!");

        } else if (pass == null) {
            mylayer.errorMsg("密码不能为空!");
        } else {
            return true;
        }
    }

</script>
<script>
    var username = document.getElementById("usernameRegister");
    var password = document.getElementById("passwordRegister");
    var email = document.getElementById("emailRegister");


    function checkRegister() {
        console.log(username.value)
        console.log(email.value)
        console.log(password.value)
        return checkUserName() && checkEmail() && checkPassWord();
    }

    function checkUserName() {

        if (username.value == " " || username.value == "") {
            mylayer.errorMsg("用户名不能为空!");
            //如果验证不通过通过此方法跳转到指定页面.
        } else if (username.value == null) {
            mylayer.errorMsg("用户名不能为空!");
        } else {
            return true;
        }
    }

    function checkPassWord() {
        if (password.value == " " || password.value == "") {
            mylayer.errorMsg("密码不能为空!");

        } else if (password.value == null) {
            mylayer.errorMsg("密码不能为空!");
        } else {
            return true;
        }
    }

    function checkEmail() {
        if (email.value == " " || email.value == "") {
            mylayer.errorMsg("邮箱不能为空!");

        } else if (email.value == null) {
            mylayer.errorMsg("邮箱不能为空!");
        } else {
            return true;
        }
    }
</script>
<script type="text/javascript">


    function refresh() {
        $('#refreshImage').attr('src', '${pageContext.request.contextPath}/getValidateCode?' + Math.random());
    }

    function submitForm() {

        if (checkUP()) {
            $.post(
                '<%=request.getContextPath()%>/user/login',
                $('#formId').serialize(),
                function (data) {
                    console.log(data);
                    if (data.code == 0) {
                        mylayer.okUrl(data.msg, '/')
                    } else {
                        mylayer.errorMsg(data.msg);
                    }
                },
                'json'
            )

        }
    }

    function register() {
        if (checkRegister()) {
            $.post(
                '<%=request.getContextPath()%>/user/register',
                $('#registerForm').serialize(),
                function (data) {
                    console.log(data);
                    if (data.code == 0) {
                        mylayer.okUrl(data.msg, '<%=request.getContextPath()%>/login');
                    } else {
                        mylayer.errorMsg(data.msg);
                    }
                },
                'json'
            )
        }
    }
</script>


</body>

</html>